<style lang='scss' scoped>
.side-menu {
    width: 100%;
    height: 100%;
    font-size: 14px;
    background: #fafbfc;
    padding-bottom: 2px;
}
.sort,
.menu {
    cursor: pointer;
    background: #fafbfc;
    padding-left: 2px;
    padding-right: 2px;
    border-bottom: solid 1px #fff;
}
.sort {
    height: 35px;
    line-height: 35px;
}
.menu {
    height: 40px;
    line-height: 40px;

    box-sizing: border-box;
}

.menu-active {
    color: #608be8;
    background: #fff;
    border-left: solid 3px #608be8;
}

.scroll {
    height: 100%;
}
</style>

<template>
    <div class="side-menu flex-vertical-box">
        <div class="sort">选择分类
            <Icon type="ios-arrow-forward" size="18"/>
        </div>
        <scrollView class="flex-auto">
            <div
                class="menu"
                :class="{'menu-active':activeIndex===index}"
                v-for="(item,index) in mockData"
                :key="item.id"
                @click="handleMenuClick(index)"
            >{{item.name}}</div>
        </scrollView>
    </div>
</template>

<script>
import scrollView from '@/components/scrollView'
export default {
    components: {
        scrollView
    },
    data() {

        return {
            menus: [
                {                    id: 0,
                    name: '上衣'
                },
                {                    id: 1,
                    name: '鞋子'
                },
                {                    id: 2,
                    name: '鞋子'
                },
                {                    id: 3,
                    name: '包包'
                },
                {                    id: 4,
                    name: '围巾'
                },
                {                    id: 5,
                    name: '配饰'
                },
            ],
            mockData: [],
            activeIndex: 0
        }
    },
    methods: {
        handleMenuClick(index) {
            this.activeIndex = index;
        },
        random() {

        },
        mock() {
            for (let i = 0; i < 30; i++) {
                let obj = {
                    id: i,
                    name: "上衣" + i
                }
                this.mockData.push(obj)
            }
        }
    },
    created() {
        this.mock()
    }



}
</script>